<template>
  <div class="app1">
    <!-- 菜谱详情页-->
    <van-nav-bar
      title="菜谱详情"
      fixed
      class="van-nav-bar1"
      @click-left="go"
      @click-right="qsc"
    >
      <!-- 左侧 -->
      <template #left class="nav">
        <van-icon name="arrow-left" color="white" />
      </template>
      <!-- <template #right v-if="!$store.state.islogin" /> -->
      <template #right>
        收藏
      </template>
      <!-- 右侧 -->
    </van-nav-bar>

    <!-- <van-nav-bar
      title="收藏"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="qushoucang"
    /> -->
    <!-- 轮播图 -->
    <div>
      <img :src="img.pic" alt="" style="width: 100%;margin-top: 46px;" />
    </div>
    <!-- 内容 -->
    <!-- 文本1 -->

    <van-nav-bar title="" style="z-index: -1">
      <template #left>
        <span style="font-size: 18px; font-weight: 900">{{ img.name }}</span>
      </template>
    </van-nav-bar>

    <!-- 文本2 -->
    <div style="margin: 0 0 0 39px">
      <div style="display: flex">
        <div>
          <van-icon name="bulb-o" color="#000000" size="20" />
          <span style="position: relative;top: -4px;left: 7px;"
            >难度：有挑战</span
          >
        </div>
        <div style="margin-left: 20px">
          <van-icon
            name="underway-o"
            color="#000000"
            size="20"
            style="margin-left: 10px"
          />
          <span style="margin-left: 10px;position: absolute;"
            >时长：{{ img.cookingtime }}</span
          >
        </div>
      </div>
      <!-- 文本3 -->
      <div class="introduction" @click="open">
        <div
          :class="isOpen"
          style="font-weight: 400; width: 90%"
          v-html="img.content"
        ></div>
        <div>
          <!-- 通过v-if判断选择图片 -->
          <img
            src="../../../assets/arrow_up.png"
            style="position: absolute; left: 50%;margin-left: -5px;"
            v-if="isOpen !== 'line-clamp'"
          />
          <img
            src="../../../assets/arrow_down.png"
            style="position: absolute; left: 50%;margin-left: -5px;"
            v-else
          />
        </div>
      </div>
    </div>
    <!-- 文本4 -->
    <div>
      <van-nav-bar style="z-index: -1">
        <template #left>
          <span style="font-size: 18px; font-weight: 900">食材清单</span>
        </template>
      </van-nav-bar>
      <div
        style="position: relative;left: 39px;width: 331px;border-radius: 10px;border: 1px solid skyblue;margin: 10px 0px;"
      >
        <div
          v-for="(itemE, valueE) in img.material"
          :key="valueE"
          style="position: relative;text-align: center;margin: 20px 10px;"
        >
          <span>{{ itemE.mname }}</span>
          <span style="margin: 0px 0 0 50px;">{{ itemE.amount }}</span>
        </div>
      </div>
    </div>
    <!-- 菜谱步骤 -->
    <div>
      <van-nav-bar title="" left-text="返回" left-arrow style="z-index: -1">
        <template #left>
          <span style="font-size: 18px; font-weight: 900">烹饪步骤</span>
        </template>
      </van-nav-bar>
    </div>

    <div v-for="(itemE, valueE) in img.process" :key="valueE" class="img">
      <div style="position: relative;">
        <img
          :src="itemE.pic"
          alt=""
          style="
            width: 80%;
            border-radius: 20px;
            position: relative;  
          "
        />

        <div
          style="width: 74px;height: 32px;position: absolute;top: 0px;left: 41px;border-radius: 20px 0px 20px 0px;background-color: rgb(24,201,52);"
        >
          <span style="position: absolute;top: 2px;left: 13px;color: white;"
            >第{{ valueE + 1 }}步</span
          >
        </div>
      </div>

      <div
        class="van-multi-ellipsis--l3"
        style="font-weight: 400; width: 80%; margin: 10px 40px 10px 40px;text-align: left;"
        v-html="itemE.pcontent"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOpen: "line-clamp",
      n1: 0,
      i: 6,
      img: {},
    };
  },

  mounted() {
    // 从json中获取·数据之后挂载
    // this.getData1();
    let id = this.$route.params.id;
    // console.log(id);
    this.axios
      .get(`/jisuapi/detail?id=${id}&appkey=13e76141171ebe61f22e24477b559988`)
      .then((res) => {
        // console.log(res.data.result);
        this.img = res.data.result.result;
      });
  },

  methods: {
    // 通过点击事件open改变class值，this.isopen是class类名。
    open() {
      this.isOpen = this.isOpen == "line-clamp" ? "" : "line-clamp";
    },
    // 回退一步
    go() {
      this.$router.go(-1);
    },
    //去收藏夹
    qsc() {
      this.fzcpid((img) => {
        let scj = img;
        // console.log(scj)
        this.$store.commit("jscj", scj);
      });
      this.$router.push("/shoucang").catch();
    },
    //封装了传过来的
    fzcpid(callback) {
      // this.getData1();
      let id = this.$route.params.id;
      // console.log(id);
      this.axios
        .get(`/jisuapi/detail?id=${id}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`)
        .then((res) => {
          // console.log(res.data.result);
          let img = res.data.result.result;
          callback(img);
        });
    },
  },
};
</script>
<style scoped>
.app1 .van-nav-bar1 {
  /* 统一主色调 */
  background-color: rgb(123, 183, 253);
}
.img {
  text-align: center;
}
.app1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.introduction {
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
}
.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
.nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: aliceblue;
  z-index: 900;
  position: fixed;
  margin: 5px 14px 0;
}
.my-swipe .van-swipe-item {
  position: relative;
}
.title {
  font-size: 25px;
  font-weight: 900;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  margin-left: -260px;
}
.hang1 {
  margin-left: -200px;
  margin-top: -5px;
  font-size: 20px;
  font-weight: 700;
}

.hang2 {
  margin-left: 200px;
  margin-top: -70px;
  font-size: 20px;
  font-weight: 700;
}
.hang4 {
  margin-left: -150px;
  margin-top: -13px;
  font-size: 20px;
  font-weight: 700;
}
.hang3 {
  margin-left: 200px;
  margin-top: -275px;
  font-size: 20px;
  font-weight: 700;
}
.box3 {
  /* width: 380px;
      height:200px; */
  border: 1px solid rgb(151, 150, 150);
  border-radius: 20px;
  margin: 30px 16px;
  /* display: flex; */
}
</style>
